<template>
  <div>
    <a-card class="contentFullHeight"  :bodyStyle="{padding : '10px 10px'}">
      <div class="">
        <a-card :bordered="true" class="searchBox" :bodyStyle="{padding : '10px 24px'}">
          <a-form layout="inline">

            <a-form-item label="部门名称">
              <a-input v-model="searchParams.name"></a-input>
            </a-form-item>

            <a-form-item >
              <a-button type="primary" icon="search" @click="handleSearch">查询</a-button>
            </a-form-item>

            <a-form-item v-if="isAuth('sys:dept:save')">
              <a-button type="primary" icon="plus" @click="handleCreate">新增</a-button>
            </a-form-item>

            <a-form-item v-if="isAuth('sys:dept:delete')">
              <a-button type="primary" icon="delete" :disabled="selectedRowKeys.length === 0" @click="handleCreate">批量删除</a-button>
            </a-form-item>

          </a-form>
        </a-card>
      </div>


      <a-table :columns="columns" :dataSource="data"
               :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
               bordered size="small" rowKey="id"
               :pagination="false" :loading="loading"
      >

        <span slot="action" slot-scope="text, record">
        <template>
          <a v-if="isAuth('sys:dept:update')"  href="javascript:;"  @click="handleUpdate(record)">修改</a>
          <a-divider type="vertical"/>
          <a v-if="isAuth('sys:dept:delete')"  href="javascript:;"  @click="handleDelete(record)">删除</a>
        </template>
      </span>

      </a-table>

      <a-modal  :maskClosable="false"
        :title="mdl.dialogTitleMap[mdl.dialogStatus]"
        :width="500"
        v-model="mdl.visible"
        @ok="mdl.dialogStatus === 'create' ? createData() : updateData()"
      >
        <a-form>

          <a-form-item
            :labelCol="mdl.labelCol"
            :wrapperCol="mdl.wrapperCol"
            label="部门"
          >
            <a-input placeholder="" v-model="mdl.formData.name"  />
          </a-form-item>


          <a-form-item
            :labelCol="mdl.labelCol"
            :wrapperCol="mdl.wrapperCol"
            label="描述"
          >
            <a-input placeholder="" v-model="mdl.formData.description"  />
          </a-form-item>

        </a-form>
      </a-modal>

    </a-card>


  </div>
</template>

<script>
  import {
    queryDeptList
  } from '@/api/system/dept'
  const align = 'center'
  const  columns = [
    {
      title: '部门',
      dataIndex: 'name',
      align
    },
    // {
    //   title: '岗位',
    //   dataIndex: 'job'
    // },
    {
      title: '描述',
      dataIndex: 'description',
      align
    },
    {
      title: '操作',
      dataIndex: 'action',
      width: '150px',
      align,
      scopedSlots: { customRender: 'action' }
    }
  ]

  // const tableData = Mock.mock({
  //   'tableData|10': [
  //     {
  //       'id': '@id',
  //       'key|+1': 1,
  //       'name': '@cname',
  //       'dept|1': ['抄表班','收费班','财务室'],
  //       'role': ['抄表员','收费员','财务','领导','管理员'],
  //       'job:1': '',
  //       'email':'@email',
  //       'tel': '123456789',
  //       'status|1':[0 , 1],
  //       'tm': '@lastDateTime',
  //     }
  //   ]
  // }).tableData

  export default {
    name:'dept' ,
    components: {},
    data() {
      return {

        /*   -------搜索框--------*/
        searchParams :{
          name:''
        },

        /*   -------弹窗--------*/
        mdl: {
          dialogStatus: '',
          dialogTitleMap: {
            update: '编辑',
            create: '添加'
          },
          visible :false ,
          title:'',
          formData:{userName:'' ,deptName:'', job:'',email:'',phone:'',role:"",status:''},
          labelCol: {
            xs: { span: 24 },
            sm: { span: 5 }
          },
          wrapperCol: {
            xs: { span: 24 },
            sm: { span: 16 }
          },
        },

        /*   -------表格--------*/

        loading: false,
        columns,
        data: [],
        selectedRowKeys: [], // Check here to configure the default column
        pagination: this.$defaultSettings.pagination ,

      }
    },
    inject: ['upShow'],filters: {},
    created() {

    },
    mounted() {
      this.getTableData()
    },
    methods: {

      onSelectChange(selectedRowKeys) {
        console.log('selectedRowKeys changed: ', selectedRowKeys);
        this.selectedRowKeys = selectedRowKeys;
      },


      getTableData() {

        this.loading = true

        const parameter = {
          _search: false,//是否分页查询
        }
        queryDeptList(parameter).then(res=>{
          if(res.code===200){
            this.data =   this.$util.filterRowChildren(res.data)
            this.loading = false
          }
          this.loading = false
        }).catch((err)=>{
            this.loading = false
           this.upShow(2)
          }
        )
      },
      handleSearch(){
        this.getTableData()
      },

      setDefaults(){
        this.mdl.formData = {userName:'' ,deptName:'', job:'',email:'',phone:'',role:"",status:''}
      },
      //添加行
      handleCreate() {
        this.setDefaults()
        this.mdl.dialogStatus = 'create'
        this.mdl.visible = true
        // this.$nextTick(() => {
        //   this.$refs['dataForm'].clearValidate()
        // })
      },
      createData(){
        this.upShow(1,"添加数据")
        this.mdl.visible = false
      },

      //编辑当前行
      handleUpdate(row) {
        console.log("这一行",row)
        this.mdl.formData = Object.assign({}, row) // copy obj
        this.mdl.dialogStatus = 'update'
        this.mdl.visible = true
        // this.$nextTick(() => {
        //   this.$refs['dataForm'].clearValidate()
        // })
      },

      updateData(){
        this.upShow(2,"修改数据")
        this.mdl.visible = false
      },

      handleDelete(row){
        this.upShow(2,"删除数据")
      },

    }
  }
</script>

<style scoped>

</style>
